import {
  ElForm,
  FormRules,
  ElInput,
  ElSelect,
  ElDatePicker,
  ElTreeSelect
} from 'element-plus'

import CETreeSearch from '../CETreeSearch/CETreeSearch.vue'
import CETreeSelect from '../CETreeSelect/CETreeSelect.vue'
import ColorPicker from '../ColorPicker/ColorPicker.vue'
import CERadioGroup from '../CERadioGroup/CERadioGroup.vue'
import CESwitch from '../CESwitch/CESwitch.vue'
import CESelect from '../CSelect/CSelect.vue'
import TinymceEditor from '../TinymceEditor/src/TinymceEditor.vue'
import VMdEditor from '../v-md-editor/v-md-editor.vue'
import CWangeEitor from '../CWangeEitor/src/CWangeEitor.vue'

import { Component, type Ref } from 'vue'

export type MyComponents =
  | 'CESelect'
  | 'CETreeSearch'
  | 'CESwitch'
  | 'CETreeSelect'
  | 'CERadioGroup'
  | 'ColorPicker'
  | 'TinymceEditor'
  | 'VMdEditor'
  | 'CWangeEitor'

export type GlobComponents =
  | 'ElInput'
  | 'ElSelect'
  | 'ElDatePicker'
  | 'ElTreeSelect'

export const myComponents = {
  CESelect,
  CETreeSearch,
  CESwitch,
  CETreeSelect,
  CERadioGroup,
  ColorPicker,
  ElInput,
  ElSelect,
  ElDatePicker,
  ElTreeSelect,
  TinymceEditor,
  VMdEditor,
  CWangeEitor
}

export interface FormFields {
  tag: GlobComponents | MyComponents | Component
  key: string
  label: string
  required?: boolean
  attrs?: Record<string, any>
  rules?: FormRules[]
  formItemAttributes?: {}
  // 是否显示当前 formItem: true -- > 隐藏
  show?: boolean | (() => void) | Ref
  on?: Record<string, (...payload: any[]) => void>
  validateRules?: any
  slot?: boolean
  tagWidth?: string
  col?: Record<string, any>
  fill?: boolean
}

export type ElFormInstance = Pick<
  InstanceType<typeof ElForm>,
  | 'resetFields'
  | 'validate'
  | 'validateField'
  | 'scrollToField'
  | 'clearValidate'
>
